import React, { Component } from 'react'
import { connect } from 'dva';
import moment from 'moment';
import { Form, Input, Select, DatePicker, Row } from 'antd';
import { SearchRow, SearchCol, SearchButton } from '@/styled/form';
import { DICT } from '../enum';
import { DropDownSelect } from '@/components/DropDownSelect/index';
import Link from 'umi/link';

const { RangePicker } = DatePicker;

interface Props {
  current: number,
  form: any,
  dispatch?: Function,
  initCurrent: Function,
  dict?: Object,
  new: boolean,
  cond?: any
}

const FormItem = Form.Item;

@connect(({ message_content }) => ({
  dict: message_content.dict,
  cond: message_content.cond
}))
class Search extends Component<Props, any> {

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'message_content/queryDict',
      payload: {
        keyList: DICT
      }
    }).then(() => {
      const { cond, form } = this.props;
      const { pageNum, pageSize, ...searchParams } = cond;
      form.setFieldsValue(searchParams);
    });
  }

  search = e => {
    e.preventDefault();
    const { dispatch } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!!values.createTimeList) {
        values.createTimeStart = moment(values.createTimeList[0]._d).format("YYYY-MM-DD");
        values.createTimeEnd = moment(values.createTimeList[1]._d).format("YYYY-MM-DD");
      }
      delete values.createTimeList;
      if (!err) {
        dispatch({
          type: 'message_content/updateCond',
          payload: {
            ...values
          }
        });

        this.props.initCurrent()
      }
    });
  };

  render() {
    const { form, dict = {} } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    return (
      <Form onSubmit={this.search}>
        <SearchRow>
          <SearchCol key={0} span={4}>
            <FormItem
              label="标题"
              {...formItemLayout}
            >
              {getFieldDecorator('title', {
                rules: [{ message: '输入标题' }],
              })(
                <Input style={{ width: '100%' }} placeholder="请输入标题" />
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={1} span={4}>
            <FormItem
              label="创建人"
              {...formItemLayout}
            >
              {getFieldDecorator('creatorName', {
                rules: [{ message: '输入创建人' }],
              })(
                <Input style={{ width: '100%' }} placeholder="请输入创建人" />
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={2} span={6}>
            <Form.Item
              {...formItemLayout}
              label='创建时间'
            >
              {getFieldDecorator('createTimeList', {
                rules: [{ required: false, message: '创建时间' }],
              })(
                <RangePicker
                  format="YYYY-MM-DD"
                  placeholder={['开始日期', '结束日期']}
                />
              )}
            </Form.Item>
          </SearchCol>
          <SearchCol key={3} span={4}>
            <FormItem
              label="状态"
              {...formItemLayout}
            >
              {getFieldDecorator('status')(
                DropDownSelect(dict, 'message.content.owner.status', 'mode', '160px')
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={4} span={6}>
            <Row type="flex" justify="end" style={{ marginTop: '-5px' }}>
              <SearchButton icon="redo" onClick={(e) => {
                this.props.form.resetFields();
                this.search(e)
              }}>重置</SearchButton>
              <SearchButton style={{ 'marginLeft': '15px' }} htmlType="submit" icon="search">搜索</SearchButton>
              <Link to='/data/message_content/new'><SearchButton type="primary" icon='plus'>新增</SearchButton></Link>
            </Row>
          </SearchCol>
        </SearchRow>
      </Form>
    );
  }
}

const SearchS = Form.create<Props>()(Search);
export default SearchS;
